<template>
  <div class="login-view">
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
      <div class="navbar-container">
        <div class="navbar-brand">
          <div class="navbar-logo">
            <el-icon size="24"><Message /></el-icon>
          </div>
          <span class="navbar-title">GovernTalk</span>
        </div>
        <div class="navbar-links">
          <router-link to="/" class="nav-link">首页</router-link>
          <router-link to="/forum" class="nav-link">论坛</router-link>
          <router-link to="/resources" class="nav-link">学习资源</router-link>
          <router-link to="/questions" class="nav-link">题库练习</router-link>
          <router-link to="/study-groups" class="nav-link">学习小组</router-link>
        </div>
        <div class="navbar-actions">
          <router-link to="/register" class="nav-button register-btn">注册</router-link>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧文字内容区域 -->
      <div class="left-content">
        <!-- 品牌标识 -->
        <div class="brand-section">
          <div class="brand-logo">
            <div class="logo-icon">
              <el-icon size="80"><Message /></el-icon>
            </div>
            <div class="brand-text">
              <h1 class="brand-title">GovernTalk</h1>
              <p class="brand-subtitle">公考交流平台</p>
              <p class="brand-description">专业的公务员考试学习交流社区</p>
            </div>
          </div>
        </div>
      
      <!-- 特色功能展示 -->
      <div class="features-section">
        <h3 class="features-title">为什么选择GovernTalk？</h3>
        <div class="features-grid">
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon size="24"><User /></el-icon>
            </div>
            <div class="feature-content">
              <h4>专业社区</h4>
              <p>汇聚全国公考考生，分享备考经验</p>
            </div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon size="24"><Document /></el-icon>
            </div>
            <div class="feature-content">
              <h4>海量资源</h4>
              <p>真题解析、学习资料、模拟试题</p>
            </div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon size="24"><Star /></el-icon>
            </div>
            <div class="feature-content">
              <h4>智能推荐</h4>
              <p>AI智能推荐个性化学习方案</p>
            </div>
          </div>
          <div class="feature-item">
            <div class="feature-icon">
              <el-icon size="24"><Clock /></el-icon>
            </div>
            <div class="feature-content">
              <h4>实时更新</h4>
              <p>最新考试资讯和政策解读</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 统计数据 -->
      <div class="stats-section">
        <div class="stat-item">
          <div class="stat-number">50,000+</div>
          <div class="stat-label">注册用户</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">100,000+</div>
          <div class="stat-label">学习资源</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">95%</div>
          <div class="stat-label">通过率</div>
        </div>
      </div>
    </div>
    
    <!-- 右侧登录区域 -->
    <!-- 右侧登录框区域 -->
    <div class="right-content">
      <!-- 背景装饰 -->
      <div class="background-decoration">
        <div class="floating-shapes">
          <div class="shape shape-1"></div>
          <div class="shape shape-2"></div>
          <div class="shape shape-3"></div>
          <div class="shape shape-4"></div>
          <div class="shape shape-5"></div>
          <div class="shape shape-6"></div>
          <div class="shape shape-7"></div>
          <div class="shape shape-8"></div>
          <!-- 线条型三角形 -->
          <div class="triangle triangle-1">
            <svg viewBox="0 0 100 100" class="triangle-svg">
              <polygon points="50,10 90,80 10,80" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="2"/>
            </svg>
          </div>
          <div class="triangle triangle-2">
            <svg viewBox="0 0 100 100" class="triangle-svg">
              <polygon points="50,10 90,80 10,80" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="1.5"/>
            </svg>
          </div>
          <div class="triangle triangle-3">
            <svg viewBox="0 0 100 100" class="triangle-svg">
              <polygon points="50,10 90,80 10,80" fill="none" stroke="rgba(255,255,255,0.18)" stroke-width="2.5"/>
            </svg>
          </div>
          <div class="triangle triangle-4">
            <svg viewBox="0 0 100 100" class="triangle-svg">
              <polygon points="50,10 90,80 10,80" fill="none" stroke="rgba(255,255,255,0.12)" stroke-width="1.8"/>
            </svg>
          </div>
          <div class="triangle triangle-5">
            <svg viewBox="0 0 100 100" class="triangle-svg">
              <polygon points="50,10 90,80 10,80" fill="none" stroke="rgba(255,255,255,0.16)" stroke-width="2.2"/>
            </svg>
          </div>
          <div class="triangle triangle-6">
            <svg viewBox="0 0 100 100" class="triangle-svg">
              <polygon points="50,10 90,80 10,80" fill="none" stroke="rgba(255,255,255,0.14)" stroke-width="1.6"/>
            </svg>
          </div>
          <!-- 额外的线条三角形 -->
          <div class="triangle triangle-7">
            <svg viewBox="0 0 100 100" class="triangle-svg">
              <polygon points="50,10 90,80 10,80" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1.2"/>
            </svg>
          </div>
          <div class="triangle triangle-8">
            <svg viewBox="0 0 100 100" class="triangle-svg">
              <polygon points="50,10 90,80 10,80" fill="none" stroke="rgba(255,255,255,0.16)" stroke-width="2.8"/>
            </svg>
          </div>
        </div>
      </div>
      
      <!-- 登录表单卡片 -->
      <div class="login-container">
      <el-card class="login-card" shadow="hover">
        <template #header>
          <div class="login-header">
            <h2 class="login-title">账号登录</h2>
            <p class="login-subtitle">欢迎回到GovernTalk</p>
          </div>
        </template>
        
        <!-- 登录表单 -->
        <el-form
          ref="loginFormRef"
          v-model="loginForm"
          :rules="loginRules"
          class="login-form"
        >
          <!-- 账号输入 -->
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入账号"
              prefix-icon="User"
              :validate-event="false"
              @blur="validateUsernameField()"
            />
          </el-form-item>

          <!-- 密码输入 -->
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              type="password"
              prefix-icon="Lock"
              show-password
              :validate-event="false"
              @blur="validatePasswordField()"
            />
          </el-form-item>

          <!-- 记住密码和忘记密码 -->
          <div class="login-options">
            <el-checkbox v-model="rememberMe" class="remember-me">记住我</el-checkbox>
            <el-button type="text" class="forgot-password" @click="showForgotPasswordModal = true">忘记密码？</el-button>
          </div>

          <!-- 登录按钮 -->
          <el-form-item>
            <el-button
              type="primary"
              class="login-button"
              @click="handleLogin"
              :loading="isLoading"
            >
              <span v-if="!isLoading">登录</span>
              <span v-else>登录中...</span>
            </el-button>
          </el-form-item>

          <!-- 注册提示 -->
          <div class="register-tip">
            <span>还没有账号？</span>
            <el-button type="text" class="register-link" @click="handleRegister">立即注册</el-button>
          </div>

          <!-- 其他登录方式 -->
          <div class="other-login-methods">
            <div class="divider">
              <span>其他登录方式</span>
            </div>
            <div class="social-login">
              <el-button type="text" class="social-btn" @click="loginWithWechat">
                <el-icon class="social-icon"><Message /></el-icon>
                <span>微信</span>
              </el-button>
              <el-button type="text" class="social-btn" @click="loginWithQQ">
                <el-icon class="social-icon"><Message /></el-icon>
                <span>QQ</span>
              </el-button>
              <el-button type="text" class="social-btn" @click="loginWithWeibo">
                <el-icon class="social-icon"><Message /></el-icon>
                <span>微博</span>
              </el-button>
            </div>
          </div>
        </el-form>
      </el-card>
      </div>
    </div>
    </div>

    <!-- 忘记密码模态框 -->
    <el-dialog v-model="showForgotPasswordModal" title="找回密码" width="500px">
      <el-form
        ref="forgotPasswordFormRef"
        v-model="forgotPasswordForm"
        :rules="forgotPasswordRules"
        class="forgot-password-form"
      >
        <el-form-item prop="username">
          <el-input
            v-model="forgotPasswordForm.username"
            placeholder="请输入账号"
            prefix-icon="User"
          />
        </el-form-item>
        <el-form-item prop="verificationCode">
          <el-input
            v-model="forgotPasswordForm.verificationCode"
            placeholder="请输入验证码"
            prefix-icon="Message"
          >
            <template #append>
              <el-button @click="sendVerificationCode" :disabled="countdown > 0">
                {{ countdown > 0 ? `${countdown}秒后重新发送` : '发送验证码' }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input
            v-model="forgotPasswordForm.newPassword"
            placeholder="请输入新密码"
            type="password"
            prefix-icon="Lock"
            show-password
          />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input
            v-model="forgotPasswordForm.confirmPassword"
            placeholder="请确认新密码"
            type="password"
            prefix-icon="Lock"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showForgotPasswordModal = false">取消</el-button>
        <el-button type="primary" @click="resetPassword">确认重置</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, FormInstance } from 'element-plus';
import { useUserStore } from '@/store/user';
import { login } from '@/api/auth';

const router = useRouter();
const userStore = useUserStore();

// 表单引用
const loginFormRef = ref<FormInstance>();
const forgotPasswordFormRef = ref<FormInstance>();

// 加载状态
const isLoading = ref(false);

// 记住密码状态
const rememberMe = ref(false);

// 忘记密码模态框
const showForgotPasswordModal = ref(false);

// 验证码倒计时
const countdown = ref(0);

// 登录表单数据
const loginForm = ref({
  username: '',
  password: ''
});

// 页面加载时检查是否有保存的用户名
const init = () => {
  const savedUsername = localStorage.getItem('username');
  if (savedUsername) {
    loginForm.value.username = savedUsername;
    rememberMe.value = true;
  }
};

// 组件挂载时初始化用户状态
onMounted(() => {
  // 初始化用户状态，检查是否已登录
  userStore.initUserState();
  
  // 初始化表单
  init();
  
  // 如果用户已经登录，直接跳转到首页
  if (userStore.isAuthenticated) {
    const redirect = new URLSearchParams(window.location.search).get('redirect');
    router.push(redirect || '/');
  }
});

// 登录表单验证规则
const loginRules = reactive({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度应在3到20个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 30, message: '密码长度应在6到30个字符之间', trigger: 'blur' }
  ]
});

// 忘记密码表单数据
const forgotPasswordForm = ref({
  username: '',
  verificationCode: '',
  newPassword: '',
  confirmPassword: ''
});

// 忘记密码表单验证规则
const forgotPasswordRules = reactive({
  username: [
    { required: true, message: '请输入账号', trigger: 'blur' }
  ],
  verificationCode: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 30, message: '密码长度应在6到30个字符之间', trigger: 'blur' },
    {
      validator: (_: any, value: string, callback: any) => {
        if (value && !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{6,30}$/.test(value)) {
          callback(new Error('密码必须包含大小写字母和数字'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (_: any, value: string, callback: any) => {
        if (value !== forgotPasswordForm.value.newPassword) {
          callback(new Error('两次输入的密码不一致'));
        } else {
          callback();
        }
      },
      trigger: 'blur'
    }
  ]
});

// 处理登录
const handleLogin = async () => {
  try {
    // 表单验证
    if (loginFormRef.value) {
      await loginFormRef.value.validate();
    } else {
      throw new Error('表单引用未初始化');
    }
    
    isLoading.value = true;

    // 调用API登录
    const response = await login({
      username: loginForm.value.username,
      password: loginForm.value.password
    });
    
    // 存储token和用户信息
    localStorage.setItem('token', response.token);
    localStorage.setItem('user', JSON.stringify(response.user));
    
    // 更新store状态
    const userData = {
      id: response.user.id.toString(),
      username: response.user.username,
      email: response.user.email,
      nickname: response.user.nickname || '',
      avatar: response.user.avatar || '',
      role: 'USER' as any,
      status: 'ACTIVE' as any,
      createdAt: new Date().toISOString(),
      updatedAt: new Date().toISOString()
    };
    userStore.setUser(userData);
    userStore.setToken(response.token);
    
    // 存储登录状态
    if (rememberMe.value) {
      localStorage.setItem('username', loginForm.value.username);
    } else {
      localStorage.removeItem('username');
    }
    
    ElMessage.success('登录成功');
    
    // 检查是否有重定向参数
    const redirect = new URLSearchParams(window.location.search).get('redirect');
    console.log('Login successful, redirecting to:', redirect || '/');
    
    // 特殊处理：如果重定向目标是AI解题相关页面，确保正确跳转
    if (redirect && (redirect.includes('/ai-solution') || redirect.includes('/ai-chat'))) {
      console.log('Redirecting to AI solution page:', redirect);
      // 使用setTimeout确保用户状态完全更新后再跳转
      setTimeout(() => {
        router.push(redirect);
      }, 100);
    } else {
      router.push(redirect || '/');
    }
  } catch (error: any) {
    // 登录失败 - 改进错误处理，避免显示具体错误信息给用户
    const errorMsg = error.message || '登录失败，请稍后重试';
    ElMessage.error(errorMsg);
    console.error('登录失败', error);
  } finally {
    isLoading.value = false;
  }
};

// 处理注册跳转
const handleRegister = () => {
  router.push('/register');
};

// 发送验证码
const sendVerificationCode = () => {
  if (!forgotPasswordForm.value.username) {
    ElMessage.warning('请先输入账号');
    return;
  }

  // 模拟发送验证码
  ElMessage.success('验证码已发送');
  
  // 开始倒计时
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

// 重置密码
const resetPassword = async () => {
  try {
    // 表单验证
    if (forgotPasswordFormRef.value) {
      await forgotPasswordFormRef.value.validate();
    } else {
      throw new Error('表单引用未初始化');
    }
    
    // 模拟重置密码请求
    setTimeout(() => {
      ElMessage.success('密码重置成功，请使用新密码登录');
      showForgotPasswordModal.value = false;
    }, 1000);
  } catch (error) {
    // 表单验证失败
    console.error('表单验证失败', error);
  }
};

// 社交媒体登录
const loginWithWechat = () => {
  ElMessage.info('微信登录功能待实现');
};

// 表单字段验证辅助方法
const validateUsernameField = () => {
  if (loginFormRef.value) {
    loginFormRef.value.validateField('username');
  }
};

const validatePasswordField = () => {
  if (loginFormRef.value) {
    loginFormRef.value.validateField('password');
  }
};

const loginWithQQ = () => {
  ElMessage.info('QQ登录功能待实现');
};

const loginWithWeibo = () => {
  ElMessage.info('微博登录功能待实现');
};


</script>

<style lang="scss" scoped>
.login-view {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  position: relative;
  overflow: hidden;
}

.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.navbar-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navbar-logo {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.navbar-title {
  font-size: 24px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.navbar-links {
  display: flex;
  gap: 40px;
}

.nav-link {
  color: #4b5563;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
  
  &:hover {
    color: #667eea;
  }
  
  &::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    transition: width 0.3s ease;
  }
  
  &:hover::after {
    width: 100%;
  }
}

.navbar-actions {
  display: flex;
  gap: 20px;
}

.nav-button {
  padding: 10px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
}

.register-btn {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  
  &:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
  }
}

.main-content {
  flex: 1;
  display: flex;
  margin-top: 70px;
  min-height: calc(100vh - 70px);
}

.left-content {
  flex: 1;
  padding: 80px 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  min-height: calc(100vh - 70px);
}

.right-content {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 80px;
  position: relative;
  min-height: calc(100vh - 70px);
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.floating-shapes {
  position: relative;
  width: 100%;
  height: 100%;
}

.shape {
  position: absolute;
  background: rgba(255, 255, 255, 0.08);
  animation: float 8s ease-in-out infinite;
  
  &.shape-1 {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    top: 10%;
    left: 3%;
    animation: floatRotate 12s ease-in-out infinite;
    animation-delay: 0s;
  }
  
  &.shape-2 {
    width: 120px;
    height: 120px;
    border-radius: 20px;
    top: 60%;
    right: 8%;
    animation: floatSlide 15s ease-in-out infinite;
    animation-delay: 2s;
  }
  
  &.shape-3 {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    top: 20%;
    right: 20%;
    animation: floatBounce 10s ease-in-out infinite;
    animation-delay: 4s;
  }
  
  &.shape-4 {
    width: 150px;
    height: 150px;
    border-radius: 30px;
    bottom: 20%;
    left: 10%;
    animation: floatRotate 18s ease-in-out infinite;
    animation-delay: 1s;
  }
  
  &.shape-5 {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    top: 5%;
    right: 30%;
    animation: floatSlide 14s ease-in-out infinite;
    animation-delay: 3s;
  }
  
  &.shape-6 {
    width: 130px;
    height: 130px;
    border-radius: 15px;
    bottom: 10%;
    right: 15%;
    animation: floatBounce 16s ease-in-out infinite;
    animation-delay: 5s;
  }
  
  &.shape-7 {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: 40%;
    left: 2%;
    animation: floatRotate 20s ease-in-out infinite;
    animation-delay: 6s;
  }
  
  &.shape-8 {
    width: 160px;
    height: 160px;
    border-radius: 25px;
    top: 65%;
    left: 35%;
    animation: floatSlide 22s ease-in-out infinite;
    animation-delay: 7s;
  }
}

// 线条型三角形样式
.triangle {
  position: absolute;
  width: 90px;
  height: 90px;
  background: transparent;
  animation: triangle3DMove 4s ease-in-out infinite;
  
  .triangle-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
  }
  
  &.triangle-1 {
    top: 10%;
    left: 15%;
    animation-delay: 0s;
    animation: triangleMove1 3s ease-in-out infinite;
  }
  
  &.triangle-2 {
    top: 40%;
    right: 20%;
    animation-delay: 0.8s;
    animation: triangleMove2 4.5s ease-in-out infinite;
  }
  
  &.triangle-3 {
    top: 70%;
    left: 25%;
    animation-delay: 1.6s;
    animation: triangleMove3 3.5s ease-in-out infinite;
  }
  
  &.triangle-4 {
    top: 25%;
    right: 35%;
    animation-delay: 2.4s;
    animation: triangleMove1 5s ease-in-out infinite;
  }
  
  &.triangle-5 {
    top: 55%;
    left: 5%;
    animation-delay: 3.2s;
    animation: triangleMove2 2.8s ease-in-out infinite;
  }
  
  &.triangle-6 {
    top: 85%;
    right: 10%;
    animation-delay: 4s;
    animation: triangleMove3 4.2s ease-in-out infinite;
  }
  
  &.triangle-7 {
    top: 30%;
    left: 0%;
    animation-delay: 1.2s;
    animation: triangleMove2 3.8s ease-in-out infinite;
    width: 70px;
    height: 70px;
  }
  
  &.triangle-8 {
    top: 60%;
    right: 0%;
    animation-delay: 2.8s;
    animation: triangleMove1 4.8s ease-in-out infinite;
    width: 110px;
    height: 110px;
  }
}

@keyframes floatRotate {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  25% {
    transform: translateY(-30px) rotate(90deg) scale(1.1);
  }
  50% {
    transform: translateY(-60px) rotate(180deg) scale(0.9);
  }
  75% {
    transform: translateY(-30px) rotate(270deg) scale(1.1);
  }
}

@keyframes floatSlide {
  0%, 100% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateX(20px) translateY(-20px) rotate(45deg);
  }
  50% {
    transform: translateX(40px) translateY(-40px) rotate(90deg);
  }
  75% {
    transform: translateX(20px) translateY(-20px) rotate(135deg);
  }
}

@keyframes floatBounce {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  20% {
    transform: translateY(-40px) scale(1.2);
  }
  40% {
    transform: translateY(-20px) scale(0.8);
  }
  60% {
    transform: translateY(-50px) scale(1.1);
  }
  80% {
    transform: translateY(-10px) scale(0.9);
  }
}

// 模式1：水平+垂直移动
@keyframes triangleMove1 {
  0% {
    transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translate3d(40px, 0, 0) rotateZ(90deg) scale(1.1);
    opacity: 1;
  }
  50% {
    transform: translate3d(0, -40px, 0) rotateZ(180deg) scale(0.9);
    opacity: 0.9;
  }
  75% {
    transform: translate3d(-40px, 0, 0) rotateZ(270deg) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) rotateZ(360deg) scale(1);
    opacity: 0.8;
  }
}

// 模式2：对角线移动
@keyframes triangleMove2 {
  0% {
    transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translate3d(35px, -35px, 0) rotateZ(90deg) scale(1.15);
    opacity: 1;
  }
  50% {
    transform: translate3d(-35px, -35px, 0) rotateZ(180deg) scale(0.85);
    opacity: 0.9;
  }
  75% {
    transform: translate3d(-35px, 35px, 0) rotateZ(270deg) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) rotateZ(360deg) scale(1);
    opacity: 0.8;
  }
}

// 模式3：圆形移动
@keyframes triangleMove3 {
  0% {
    transform: translate3d(0, 0, 0) rotateZ(0deg) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translate3d(30px, -30px, 0) rotateZ(90deg) scale(1.1);
    opacity: 1;
  }
  50% {
    transform: translate3d(0, -40px, 0) rotateZ(180deg) scale(0.9);
    opacity: 0.9;
  }
  75% {
    transform: translate3d(-30px, -30px, 0) rotateZ(270deg) scale(1.05);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, 0, 0) rotateZ(360deg) scale(1);
    opacity: 0.8;
  }
}

.brand-section {
  margin-bottom: 80px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 40px;
}

.logo-icon {
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 15px 40px rgba(102, 126, 234, 0.5);
}

.brand-text {
  flex: 1;
}

.brand-title {
  font-size: 64px;
  font-weight: 800;
  color: white;
  margin: 0 0 15px 0;
  text-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.brand-subtitle {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 15px 0;
  font-weight: 600;
}

.brand-description {
  font-size: 22px;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 400;
  line-height: 1.6;
}

.features-section {
  margin-bottom: 80px;
}

.features-title {
  font-size: 36px;
  font-weight: 700;
  color: white;
  margin: 0 0 50px 0;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.4s ease;
  
  &:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  }
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}

.feature-content {
  flex: 1;
  
  h4 {
    font-size: 22px;
    font-weight: 600;
    color: white;
    margin: 0 0 12px 0;
  }
  
  p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    line-height: 1.6;
  }
}

.stats-section {
  display: flex;
  gap: 60px;
}

.stat-item {
  text-align: center;
  
  .stat-number {
    font-size: 48px;
    font-weight: 800;
    color: white;
    margin: 0 0 12px 0;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  }
  
  .stat-label {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 500;
  }
}

.login-container {
  width: 100%;
  max-width: 400px;
  position: relative;
  z-index: 2;
}

.login-card {
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.login-header {
  text-align: center;
  padding: 30px 0 20px 0;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.login-title {
  font-size: 28px;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 8px 0;
}

.login-subtitle {
  font-size: 16px;
  color: #64748b;
  margin: 0;
  font-weight: 500;
}

.login-form {
  padding: 0 40px 40px 40px;
}

.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  font-size: 14px;
}

.remember-me {
  color: #4b5563;
  font-weight: 500;
}

.forgot-password {
  color: #667eea;
  font-weight: 500;
  transition: all 0.3s;
  
  &:hover {
    color: #764ba2;
  }
}

.login-button {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);

  &:hover {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
  }

  &:active {
    transform: translateY(0px);
  }
}

.register-tip {
  text-align: center;
  margin-top: 25px;
  font-size: 15px;
  color: #4b5563;
  font-weight: 500;
}

.register-link {
  color: #667eea;
  padding: 0 5px;
  font-weight: 600;
  transition: all 0.3s;
  
  &:hover {
    color: #764ba2;
  }
}

.other-login-methods {
  margin-top: 35px;
}

.divider {
  display: flex;
  align-items: center;
  margin-bottom: 25px;

  &::before,
  &::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
  }

  span {
    padding: 0 20px;
    font-size: 14px;
    color: #9ca3af;
    font-weight: 500;
  }
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 25px;
}

.social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 15px 20px;
  color: #6b7280;
  transition: all 0.3s;
  border-radius: 12px;
  background: rgba(102, 126, 234, 0.05);
  border: 1px solid rgba(102, 126, 234, 0.1);

  &:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.1);
    border-color: rgba(102, 126, 234, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
  }
}

.social-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

.forgot-password-form {
  padding: 20px 0;
}

// 深色模式支持
.dark-mode .login-view {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
}

.dark-mode .login-card {
  background: rgba(30, 30, 30, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .login-header {
  background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
}

.dark-mode .login-title {
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dark-mode .login-subtitle {
  color: #a0aec0;
}

.dark-mode .brand-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.dark-mode .register-tip {
  color: #a0aec0;
}

.dark-mode .social-btn {
  background: rgba(102, 126, 234, 0.1);
  border-color: rgba(102, 126, 234, 0.2);
  color: #a0aec0;
  
  &:hover {
    background: rgba(102, 126, 234, 0.2);
    color: #667eea;
  }
}

.dark-mode .feature-item {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  
  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}

// 响应式设计
@media (max-width: 1400px) {
  .navbar-container {
    padding: 0 30px;
  }
  
  .left-content {
    padding: 60px 80px;
  }
  
  .right-content {
    flex: 0 0 550px;
    padding: 50px;
  }
}

@media (max-width: 1200px) {
  .left-content {
    padding: 50px 60px;
  }
  
  .brand-title {
    font-size: 56px;
  }
  
  .brand-subtitle {
    font-size: 28px;
  }
  
  .brand-description {
    font-size: 20px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .right-content {
    flex: 0 0 500px;
    padding: 40px;
  }
}

@media (max-width: 768px) {
  .navbar-container {
    padding: 0 20px;
    height: 60px;
  }
  
  .navbar-links {
    display: none;
  }
  
  .navbar-title {
    font-size: 20px;
  }
  
  .main-content {
    margin-top: 60px;
    flex-direction: column;
  }
  
  .left-content {
    flex: none;
    padding: 40px 30px;
    text-align: center;
  }
  
  .right-content {
    flex: none;
    padding: 30px;
  }
  
  .brand-logo {
    justify-content: center;
    flex-direction: column;
    gap: 20px;
  }
  
  .brand-title {
    font-size: 48px;
  }
  
  .brand-subtitle {
    font-size: 24px;
  }
  
  .brand-description {
    font-size: 18px;
  }
  
  .features-title {
    font-size: 28px;
  }
  
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .feature-item {
    padding: 20px;
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }
  
  .stats-section {
    justify-content: center;
    gap: 40px;
  }
  
  .stat-number {
    font-size: 36px;
  }
  
  .stat-label {
    font-size: 16px;
  }
  
  .login-container {
    max-width: 100%;
  }
  
  .login-form {
    padding: 0 30px 30px 30px;
  }
  
  .social-login {
    gap: 20px;
  }
}

@media (max-width: 480px) {
  .left-content {
    padding: 30px 20px;
  }
  
  .right-content {
    padding: 15px;
  }
  
  .brand-logo {
    flex-direction: column;
    gap: 15px;
  }
  
  .brand-title {
    font-size: 28px;
  }
  
  .brand-subtitle {
    font-size: 16px;
  }
  
  .brand-description {
    font-size: 14px;
  }
  
  .features-title {
    font-size: 20px;
    margin-bottom: 30px;
  }
  
  .feature-item {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .stats-section {
    flex-direction: column;
    gap: 20px;
  }
  
  .login-form {
    padding: 0 20px 25px 20px;
  }

  .login-title {
    font-size: 24px;
  }

  .social-login {
    gap: 15px;
  }
  
  .social-btn {
    padding: 12px 15px;
  }
  
  .social-icon {
    font-size: 24px;
  }
}
</style>